const video = document.getElementById('video');
    Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
      faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
      faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
      faceapi.nets.faceExpressionNet.loadFromUri('/models')
    ]).then(() => this.startVideo(video))
      .catch(error => console.error('Error loading face-api.js models:', error));
  

    function startVideo(video) {
      navigator.getUserMedia(
        { video: {} },
        stream => video.srcObject = stream,
        err => console.error(err)
      );
    }
    
    video.addEventListener('play', () => {
        const canvas =faceapi.createCanvasFromMedia(viedo)
        document.body.append(canvas)
        const displySize = {
            width:video.width,height:video.height
        }
        faceapi.matchDimensions(canvas, displySize)

        setInterval(async () => {
            const detections = await faceapi.detectAllFace(video,
            new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks()
            .withFaceExpressions()
            console.log(detections);
            const resizedDetections =  faceapi.resizeResults
            (detections,displySize)
            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
            faceapi.draw.drawDetections(canvas,resizedDetections)
            faceapi.draw.drawFaceLandmarks(canvas,resizedDetections)
            faceapi.draw.drawFaceExpressions(canvas,resizedDetections)
    },100)
    
}
)
  